<!-- 这里是一次性加载 LayoutComponents -->
<template>
  <div class="overflow-hidden" v-if="loading">
    <KoiLoading></KoiLoading>
  </div>
  <div v-else>
    <!-- 同级进行选择不同布局时就不会被关闭 v-if="!loading" -->
    <ThemeConfig></ThemeConfig>
    <!--  && !isIPad v-if="!isMobile" -->
    <component :is="LayoutComponent[layout]" v-if="!isMobile" />
    <component :is="LayoutMobile" v-if="isMobile" />
  </div>
</template>

<script setup lang="ts" name="layout">
import { useScreenStore } from "@/hooks/screen/index.ts";
import { ref, onMounted, computed, type Component } from "vue";
// 全局主题配置
import useGlobalStore from "@/stores/modules/global.ts";
import ThemeConfig from "@/layouts/components/ThemeConfig/index.vue";
import LayoutBlog from "@/layouts/LayoutBlog/index.vue";
import LayoutMobile from "@/layouts/LayoutMobile/index.vue";
import KoiLoading from "@/views/loading/index.vue";

type LayoutType =  string;
const LayoutComponent: Record<LayoutType, Component> = {
  blog: LayoutBlog
};

// 全局主题仓库
const globalStore = useGlobalStore();
// 获取布局格式
const layout = computed(() => globalStore.layout);
// 获取当前为[移动端、IPad、PC端]仓库，阔以使用 watchEffect(() => {}) 进行监听。
const { isMobile } = useScreenStore();

/** 自定义Loading加载 */
onMounted(() => {
  // 取消加载
  cancelLoading();
});

const loading = ref(true);

const cancelLoading = () => {
  setTimeout(() => {
    loading.value = false
  }, 800);
};
</script>

<style scoped lang="scss"></style>
